<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>仓储系统</title>
<link rel="stylesheet" href="css/base.css">

</head>
<body>
    <div class="all">
        <div class="top">
            <div class="logo">仓储系统</div>
            <div class="other">
                <div class="notice_icon"><span>5</span>
                    <img src="images/notice.png" width="24" style="margin-top:2px;" />
                </div>
                <div class="user_info"><img width="30" src="images/touxiang.png" />
                </div>
            </div>
        </div>
        <div class="cnt">
            <script src="js/nav.js"></script>
            <script>
                setColor(0)
            </script>
            <div class="main">
                <div class="main_top">
                    <h3>通知公告</h3>
                    <div class="search">
                        <input id="stitle" placeholder="标题" />
                        <img id="search_btn"
                             onclick="search()"
                             width="16" src="images/search.png" />
                    </div>
                    <div class="btn" id="add_btn" onclick="add()">新增公告</div>
                   <div class="btn" id="save_btn" style="display:none" onclick="save()">保存</div>
                </div>
                <div id="loading" style="text-align: center;height:300px;line-height: 300px">
                    <img src="https://gd-hbimg.huaban.com/3099e765b298074ac966b5b9b09b01abab1914cdfaab-OsdLGk_fw658" />
                </div>
                <div id="list_div">

                </div>
                <div id="add_div" style="display:none;">
                    <div class="input_div">公告标题：<input id="title"  /></div>
                    <div class="input_div">公告详情：
                        <div id="content" style="margin-top:10px;border-radius:2px;width:100%;height:300px;
                        border:1px solid #ccc;outline:none;padding:5px;" contenteditable="true"></div></div>
                    <div class="input_div">公告类型：
                        <select id="type">
                            <option value="总部公告">总部公告</option>
                            <option value="战区公告">战区公告</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
        <div class="bot">
            Copyright © 2022-2023 XINLING. All Rights Reserved.
        </div>
    </div>
<script>
    var notices = [];
    loadData();

    function showData(arr){
        list_div.innerHTML = "";
        for(var i=arr.length-1;i>=0;i--){
            var a = arr[i];
            list_div.innerHTML +=
                "<div class='list'>" +
                "<div class='ntitle'>"+a.title+"</div>" +
                "<div class='ntime'>"+a.time+"</div>" +
                "</div>";
        }
    }

    function search(){
        loadData({title:stitle.value});
    }

    function loadData(data){
        list_div.innerHTML = "";
        loading.style.display = "block";
        var req = new XMLHttpRequest();
        req.open("post","/find_all_notice");
        req.setRequestHeader("content-Type","application/json;charset=utf-8");
        if(!data) data = {}
        req.send(JSON.stringify(data));
        req.onreadystatechange = function(){
            if(req.readyState==4&&req.status==200){
               notices = JSON.parse(req.responseText);
               showData(notices);
               loading.style.display = "none";
            }
        }
    }

    function save(){
        var req = new XMLHttpRequest();
        req.open("post","/add_notice");
        req.setRequestHeader("content-Type","application/json;charset=utf-8");
        var data = {
            title:title.value,
            content:content.innerHTML,
            type:type.value
        }
        req.send(JSON.stringify(data));
        req.onreadystatechange = function(){
            if(req.readyState==4&&req.status==200){
                if(req.responseText.trim()=="1"){
                    alert("新增成功！");
                }

                loadData();
                add_div.style.display = "none";
                list_div.style.display = "block";
                save_btn.style.display = "none";
                add_btn.style.display = "block";
            }
        }
    }

    function add(){
        add_div.style.display = "block";
        list_div.style.display = "none";
        save_btn.style.display = "block";
        add_btn.style.display = "none";
    }
</script>
</body>
</html>
